<template>
    <div class="srarch" @touchstart='touchstart' @touchend='touchend'>
        <slot-header class="slot-header">
            <template #title_text><span class="title_text">搜索结果</span></template>
            <!-- <template #title_right><van-icon name="setting-o" color='#A7ABAA' size='1.1rem' /></template> -->
        </slot-header>
        <div v-for="(item,index) of search_List" :key="index">
            <van-card
                :tag="item.sp_is_on==1?'在售':'下架'"
                :price="item.sp_price.toFixed(2)"
                :title="item.sp_name"
                :thumb="item.sp_img"
            >
                <template #desc>
                    <div class="van-card__desc van-multi-ellipsis--l3">{{item.sp_descript}}</div>
                </template>
                <template #footer>
                    <div @click="detail_show(item)" style="margin-bottom:3rem;color:#4E05DF;text-decoration:underline;font-size: 12px;">查看详情>></div>
                    <!-- <van-stepper v-model="stepper_value[item.spid-1]" @change='stepper_value_change()' theme="round" :min='0' button-size="1.2rem" disable-input />  -->
                </template>
            </van-card>
        </div>
         <!-- 展示详情 -->
      <van-action-sheet v-model="sp_detail_show" title="详情大图">
        <div class="content">
            <div class="content_no">
                <van-cell title="基础信息"/>
                <van-cell title="所属分类" icon="orders-o" :value="sp_detail.sp_type_id==10?'折扣':sp_detail.sp_type_id==20?'炭烤荤类':sp_detail.sp_type_id==30?'炭烤素类':'酒水饮料'" />
                <van-card
                    :price="sp_detail.sp_price==undefined?(0).toFixed(2):sp_detail.sp_price.toFixed(2)"
                    :title="sp_detail.sp_name"
                    :desc="sp_detail.sp_descript"
                    :thumb="sp_detail.sp_img"
                />
                <div class="sp_card">
                    <van-cell title="详细大图"/>
                    <div class="sp">
                        <div class="xxdt" v-for="(item,index) of sp_detail.sp_detail" :key="index">
                            <div class="xxdt_tu">
                                <van-image
                                    width="100%"
                                    fit="contain"
                                    :src="item.sp_detail_img"
                                />
                            </div>
                            <van-divider>描述</van-divider>
                            <div class="xxdt_text">
                                <span style="text-align: center;">{{item.sp_detail_describe}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </van-action-sheet>
    </div>
</template>
<script>
let startPoint = {}; //摁下时手指坐标
let disPoint = {};//手指移动距离
import { Toast } from 'vant';
export default {
    data() {
        return{
            // 搜索结果
            search_List:[],
            // 商品详情是否显示
            sp_detail_show:false,
            // 商品详情
            sp_detail:{
                // spid:
                // sp_name:
                // sp_type_id:
                // sp_descript:
                // sp_price:1,
                // sp_detail:{sp_detail1:{sp_detail_img1:,sp_detail_describe1},sp_detail2:{}}
            }
        }
    },
    methods:{
        // 获取详情
        detail_show(item){
            this.axios.get(
            '/product/getSpDetail',{
            params:{sp_id:item.spid}
            }).then(res => {
                console.log(res.data.data)
                 if(res.data.code==200){
                    var sp_detail={
                        spid:res.data.data[0].sp_id,
                        sp_name:res.data.data[0].untitled,
                        sp_img:item.sp_img,
                        sp_type_id:item.sp_type_id,
                        sp_descript:item.sp_descript,
                        sp_price:item.sp_price,
                        sp_detail:{sp_detail1:{sp_detail_img:res.data.data[0].sp_detail_img1,sp_detail_describe:res.data.data[0].sp_detail_describe1},sp_detail2:{sp_detail_img:res.data.data[0].sp_detail_img2,sp_detail_describe:res.data.data[0].sp_detail_describe2}}
                    }
                    this.sp_detail = sp_detail
                    this.sp_detail_show=true
                    console.log(item)
                 }else{
                    Toast({
                        message: `获取失败，稍后重试`,
                        position: 'top',
                    });
                 }
            })
        },
        // 以下是滑动退出事件
        touchstart({changedTouches}){
        startPoint = {
                x: changedTouches[0].pageX,
                y: changedTouches[0].pageY
            }
        // console.log(startPoint)
        },
        touchend(e){
            let touch = e.changedTouches[0];
            let nowPoint = {
                x: touch.pageX,
                y: touch.pageY
            };
            disPoint = {
                x: nowPoint.x - startPoint.x,
                y: nowPoint.y - startPoint.y
            };
            if(startPoint.x<20&&disPoint.x>120){
                history.go(-1)
            }
        }, 
    },
    mounted(){
    this.search_List = this.$store.state.search_List
    // console.log(this.$store.state.search_List)
    }
}
</script>